<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../fonts/iconfont.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css">
		<link rel="stylesheet" href="../css/mui.poppicker.css">
		<style>
			html,
			body {
				background-color: #f9f9f9;
			}
			.mui-pull{
					background-color: #f9f9f9;
			}
			.mui-pull-bottom-pocket{
				background-color: #f9f9f9;
			}
			
			.title {
				margin: 20px 15px 20px;
				color: #6d6d72;
				font-size: 15px;
				line-height: 20px;
			}
			
			.mui-ellipsis {
				letter-spacing: 0.5px
			}
			
			.icon {
				/* 通过设置 font-size 来改变图标大小 */
				width: 5.5em;
				height: 5.5em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -1em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
			}
			
			.icon2 {
				/* 通过设置 font-size 来改变图标大小 */
				width: 1.8em;
				height: 1.8em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -0.3em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
				color: #666666;
			}
			
			.mui-bar.mui-bar-nav {
				background-color: white;
			}
			
			.mui-ellipsis span {
				display: inline-block;
				width: 30%;
			}
			
			.act:active {
				color: black
			}
			
			.mui-table-view:before {
				background-color: #efeff4;
			}
			
			.mui-table-view:after {
				background-color: #efeff4;
			}
			
			.mui-table-view-cell:after {
				background-color: #ffffff;
			}
			
			.mui-table-view-cell:active {
				background-color: #ffffff
			}
			
			.diy_header {
				width: 100%;
				background: white;
				padding-bottom: 10px;
				border-bottom: 1px solid #cccccc;
				height: 100px;
				position: relative;
				margin-bottom: 20px;
				position: fixed;
				top: 0;
				z-index: 99999;
			}
			
			.mui-placeholder span {
				color: #fcffff !important;
			}
			
			.mui-placeholder span:before {
				color: #fcffff !important;
			}
			
			.mui-active:before {
				color: #fcffff
			}
			
			ul,
			li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			body {
				background: #f9f9f9;
			}
			
			.info-list {
				//padding-top: 20px;
			}
			
			.info-wrap {
				overflow: hidden;
			}
			
			.iw-header {
				text-align: center;
				float: left;
				width: 35%;
			}
			
			.iw-header img {
				84px;
				height: 84px;
				border-radius: 100%;
			}
			
			.iw-header h1 {
				font-size: 22px;
				margin: 10px auto;
				color: #333333;
			}
			
			.iw-list {
				text-align: left;
				width: 60%;
				float: left;
			}
			
			.iw-list li {
				color: #aaaaaa;
				line-height: 40px;
			}
			
			.btn-bar {
				width: 100%;
				margin: 20px auto;
				overflow: hidden;
				border: solid 1.5px #00af66;
				border-radius: 40px;
				height: 40px;
				line-height: 40px;
			}
			
			.btn-bar li {
				float: left;
				width: 33.33%;
				padding-left: 2%;
				box-sizing: border-box;
			}
			
			.btn-bar li a {
				color: #00af66;
				text-decoration: none;
				width: 100%;
				display: block;
			}
			
			.btn-bar .current-li a {
				color: #ffffff;
			}
			
			.btn-bar .current-li {
				background: #00af66;
			}
			
			.user-from {
				width: 100%;
				margin: 0 auto;
			}
			
			.user-from li {
				overflow: hidden;
				line-height: 40px;
				color: #666666;
				width: 100%;
				margin: 20px auto;
			}
			
			.user-from li a {
				color: #666666;
				display: block;
				width: 100%;
				height: 40px;
			}
			
			.user-from li img {
				width: 32px;
				vertical-align: middle;
			}
			
			.user-from li input {
				color: #ababab;
				display: inline-block;
				width: 65%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
			}
			
			.user-from li label {
				color: #666666;
			}
			
			.seach-user {
				width: 100%;
				text-align: center;
				color: #ffffff;
				display: block;
				margin: 30px auto;
				background: #00af66;
				border-radius: 40px;
				line-height: 40px;
				height: 40px;
			}
			
			.top-img {
				margin: 30px auto;
				text-align: center;
				display: block;
				width: 30%;
			}
			.forma:active{
				font-weight: bold;

			}
			.leftfont{float: left;width: 80%;}
			.leftfont span{display: block;}
			.rightbutton{float: left;width: 20%;}
			.rightbutton button{margin-top: 4px;}
			
		</style>

	</head>

	<body>
		<div class="diy_header">
			<a class="mui-action-back mui-icon" style="padding-left: 1%;width:200px;height:200px;"><span class="mui-icon mui-icon-back" style="color: #333333;font-size: 26px;margin-top: 15px;"></span></a>
			<h3 style="margin: 0;padding: 0;position: absolute;bottom: 20px;padding-left: 3%;color: #333333;">
				入户调查
			</h3>
				<a href="javascript:void(0);" onclick="openWin('fammerForm.html')" style="position: absolute;bottom: 20px;right: 20px;">
							<svg class="icon2" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-unie612"></use>
                    </svg> 
					</a>
		
		</div>

		<div id="fammerList" style="margin-top: 100px;">

			<ul class="user-from">
				<div style="text-align: center;padding-top: 10px;">
			
				</div>
				<li style="padding-left: 4%;">
					<svg class="icon2" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dingwei"></use>
                    </svg>
					<label>
			地理位置
			<input id='areaPicker' type="text"   readonly="true" v-model="areaname" style="font-size: 13px;"/>
		</label>
				</li>
				<!--<li>
					<a href="javascript:void(0);" onclick="openWin('fammerForm.html')">
							<svg class="icon2" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-unie612"></use>
                    </svg> 添加农户信息
					</a>
				</li>-->
				<!--<a href="" class="seach-user">农户检索</a>-->
			</ul>
			
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background: #f9f9f9;">
			<div class="mui-scroll" style="background: #f9f9f9;">
				<div v-for="item in fammers" style="margin-bottom: 10px;padding:30px;overflow: hidden;background: #ffffff;">
					<div class="leftfont">
						<span>户主：{{item.name}}</span>
						<span>家庭人口：{{item.familys}}</span>
						<span>是否贫困：{{item.poor==0?'否':'是'}}</span>
						<span>家庭住址：{{item.address}}</span>
						<span @click="dial(item.mobile)" style="color: blue;">联系电话：{{item.mobile}}</span>
					</div>
					<div class="rightbutton">
						<button @click="addInfo(item.name,item.id,'plantAndBreed.html')">种养信息</button>
						<button @click="dxdan(item.name,item.id,'dxdanForm.html')">订销信息</button>
						<button @click="dxdan(item.name,item.id,'historys.html')">历史信息</button>
					</div>	
				</div>
				
			</div>
		</div>

		<!--	<div  v-for="item in fammers">
				
				<div style="padding:30px;margin-bottom: 10px;overflow: hidden;background: #ffffff;">
					<div class="leftfont">
						<span>户主：{{item.name}}</span>
						<span>家庭人口：{{item.familys}}</span>
						<span>是否贫困：{{item.poor==0?'否':'是'}}</span>
						<span>家庭住址：{{item.address}}</span>
						<span @click="dial(item.mobile)" style="color: blue;">联系电话：{{item.mobile}}</span>
					</div>
					<div class="rightbutton">
						<button @click="addInfo(item.name,item.id,'plantAndBreed.html')">种养信息</button>
						<button @click="dxdan(item.name,item.id,'dxdanForm.html')">订销信息</button>
						<button @click="dxdan(item.name,item.id,'historys.html')">历史信息</button>
					</div>	
				</div>
			
			</div>-->


			<!--	<div class="title">
				<div class="act" id='areaPicker'>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-iconset0391"></use>
					</svg>
					{{areaname==''?'请选择区域':areaname}}

				</div>
				<div style="height: 20px;"></div>
				<div class="act" onclick="openWin('fammerForm.html')">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jiahao"></use>
					</svg>
					添加农户信息

				</div>
			</div>
			
			<div class="mui-indexed-list-search mui-input-row mui-search" style="width:98%;margin: auto;">
				<input style="background: white;color: #666666;"  type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="农户检索" v-model="nameparam">
			</div>

			<ul class="mui-table-view">

				<li style="border-bottom: 8px solid #efeff4;" class="mui-table-view-cell mui-media" v-for="item in fammers">

					<div class="mui-media-body">
						<div style="margin-top: 10px;width:20%;float: left;text-align: left;color: #6d6d72;"><img src="../img/user.png" />
							<p class='mui-ellipsis'>
								<div style="margin-top: 10px;">{{item.name}}</div>
							</p>
						</div>
						<div style="width:80%;float:left;">

							<p class='mui-ellipsis'><span>身份证号：{{item.id_card}}</span></p>
							<p class='mui-ellipsis'> <span>家庭人口：{{item.familys}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>是否贫困户：{{item.poor==0?'否':'是'}}</span></p>
							<p class='mui-ellipsis'>行政区域：{{areaname}}</p>
							<p class='mui-ellipsis'>家庭住址：{{item.address}}</p>
							<p class='mui-ellipsis' @click="dial(item.mobile)">联系电话：<a id="icon-phone" class="active" ><span class="mui-icon mui-icon-phone-filled" style="font-size: 16px;">{{item.mobile}}</span></a></p>

						</div>

						<button @click="addInfo(item.name,item.id,'plantAndBreed.html')" type="button" class="mui-btn" style="float:left;width: 32%;color: #6d6d72;margin-top: 10px;"><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jiahao"></use>
					</svg>种/养殖信息</button>
						<button @click="dxdan(item.name,item.id,'dxdanForm.html')" type="button" class="mui-btn" style="margin-left:2%;float:left;width: 32%;color: #6d6d72;margin-top: 10px;"><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jiahao"></use>
					</svg>订销单信息</button>
						<button @click="dxdan(item.name,item.id,'historys.html')" type="button" class="mui-btn" style="margin-left:2%;float:left;width: 32%;color: #6d6d72;margin-top: 10px;"><svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-chaxun"></use>
					</svg>历史信息</button>

					</div>

				</li>

			</ul>-->

		</div>
	</body>
	<script src="../js/resource/mui.js"></script>
	<script src="../js/resource/mui.picker.js"></script>
	<script src="../js/resource/mui.poppicker.js"></script>
	<script src="../js/resource/vue.js"></script>
	<script src="../js/resource/axios.js"></script>
	<script src="../js/resource/config.js"></script>
	<script src="../js/fammerList.js"></script>

	<script type="text/javascript" charset="utf-8">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style:'circle',
						callback: pulldownRefresh
					},
					up: {
						auto:true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			var count = 0;
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count>1)); //参数为true代表没有更多数据了。
				/*	var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					var newCount = cells.length>0?5:20;//首次加载20条，满屏
					for (var i = cells.length, len = i + newCount; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						table.appendChild(li);
					}*/
				}, 1500);
			}

			function addData() {
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for(var i = cells.length, len = i + 5; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
					//下拉刷新，新纪录插到最前面；
					table.insertBefore(li, table.firstChild);
				}
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				//plus.nativeUI.showWaiting();
			
						fammerList.getFammers()
					//addData();
					
					//plus.nativeUI.closeWaiting();
				
			}

		(function($, doc) {
			$.init();
			$.ready(function() {
				axios({
					method: 'POST',
					url: sever + '/getDutyArea',
					params: {
						"user.id": localStorage.localuserid
					},
					responseType: 'json',
				}).then(function(result) {
					area = result.data.data
					
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 1
					});
					//没有设定村
					if(area.length <= 0) {
						mui.alert("未设置录入员区域信息")
						return;
					}
					fammerList.areacode = area[0].value
					fammerList.areaname = area[0].text

			/*		cityPicker3.show(function(items) {
						fammerList.areacode = _getParam(items[0], 'value')
						fammerList.areaname = _getParam(items[0], 'text')
					});
*/
					//是否直接显示选村

					cityPicker3.setData(area);
					var areaPickerButton = doc.getElementById('areaPicker');

					areaPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							fammerList.areacode = _getParam(items[0], 'value')
							fammerList.areaname = _getParam(items[0], 'text')
						});
					}, false);
				})
			});
		})(mui, document);
	</script>

</html>